<template>
  <div class="unauthorized-container">
    <el-empty
        :image="emptyImage"
        :image-size="400"
        description=" "
    >
      <template #description>
        <div class="description-content">
          <h1 class="title">401 未授权</h1>
          <p class="subtitle">抱歉，您没有权限访问此页面</p>
          <div class="actions">
            <el-button type="primary" @click="goBack">返回上一页</el-button>
            <el-button @click="goHome">返回首页</el-button>
          </div>
        </div>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import emptyImage from '@/assets/401.png'; // 请替换为你的401图片路径

const router = useRouter();

const goBack = () => {
  router.go(-1);
};

const goHome = () => {
  router.push('/');
};
</script>

<style scoped>
.unauthorized-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f7fa;
}

.description-content {
  text-align: center;
  margin-top: -50px;
}

.title {
  font-size: 32px;
  margin-bottom: 16px;
  color: #303133;
}

.subtitle {
  font-size: 16px;
  color: #606266;
  margin-bottom: 24px;
}

.actions {
  margin-top: 20px;
}
</style>